<script setup>
import { ref } from 'vue'
import * as Cesium from 'cesium'

const props = defineProps({
  baseType: {
    type: String,
    default: 'image'
  }
})
const tianditutk = '75f1cc913e8d68f7bd4b6f6383f78ceb'
const emit = defineEmits(['changeBaseLayer', 'closeSetting'])
const isDefaultShow = ref(false)
const isEnumShow = ref(false)
const mapRange = ref(localStorage.getItem('mapRange') || '-180.00,90.00/180.00,-90.00')
const setMapRange = () => {
  const ellipsoid = window.viewer.scene.globe.ellipsoid
  const rectangle = window.viewer.camera.computeViewRectangle(ellipsoid)
  const left = Cesium.Math.toDegrees(rectangle.west).toFixed(2)
  const top = Cesium.Math.toDegrees(rectangle.north).toFixed(2)
  const right = Cesium.Math.toDegrees(rectangle.east).toFixed(2)
  const bottom = Cesium.Math.toDegrees(rectangle.south).toFixed(2)
  // 打印结果
  mapRange.value = `${left},${top}/${right},${bottom}`
}
const commitSetting = () => {
  localStorage.setItem('mapRange', mapRange.value)
  if(isDefaultShow.value) {
    emit('changeBaseLayer', props.baseType)
  }
  if(isEnumShow.value) {
    window.viewer.scene.imageryLayers.remove(window.enumLayer)
    switch(props.baseType) {
      case 'image':
        window.enumLayer = new Cesium.UrlTemplateImageryProvider({
          url: 'http://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=' + tianditutk,
        })
        window.viewer.imageryLayers.addImageryProvider(window.enumLayer)
        break
      case 'globe':
        window.enumLayer = new Cesium.UrlTemplateImageryProvider({
          url: 'http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + tianditutk,
        })
        window.viewer.imageryLayers.addImageryProvider(window.enumLayer)
        break
      case 'street':
        window.enumLayer = new Cesium.UrlTemplateImageryProvider({
          url: 'http://t0.tianditu.gov.cn/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=' + tianditutk,
        })
        window.viewer.imageryLayers.addImageryProvider(window.enumLayer)
        break
    }
  }
  emit('closeSetting')
}
</script>

<template>
  <div class="toggle-baselayer-setting">
    <div class="setting-title">
      <div style="margin-left: 30px;">底图设置</div>
      <div @click="$emit('closeSetting')" 
      style="transform: scale(2);cursor: pointer;margin-right: 10px;">×</div>
    </div>
    <div class="setting-content">
      <div class="setting-content-up">
        <label for="isDefault">
          <input type="checkbox" id="isDefault" v-model="isDefaultShow">本系统是否默认显示</input>
        </label>
        <label for="isEnum">
          <input type="checkbox" id="isEnum" v-model="isEnumShow">是否包含影像注记</input>
        </label>
      </div>
      <div class="setting-content-menu">
        底图显示范围
        <input type="text" v-model="mapRange" />
        <button @click="setMapRange">采用当前视角</button>
      </div>
      <button style="width: 80px;position: absolute;cursor: pointer;
      left: 50%;bottom: 10px;transform: translateX(-50%);"
       @click="commitSetting">确定</button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.toggle-baselayer-setting {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ccc;
  width: 450px;
  height: 200px;

  .setting-title {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .setting-content {
    width: 100%;
    height: calc(100% - 30px);

    .setting-content-up {
      width: 75%;
      height: 40px;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }
}
</style>
